<template>
	<view class="">
		<TopPopup ref="topPopup" :transTop='transTop' :classify='classify' />
		<view class="head">
			<view class="head__hint px30 fs24" v-if="hintShow">{{hintText}}</view>
			<view class="mintba fsc px30">
				<view class="flex_y">
					<view class="">共13件</view>
				</view>
				<view class="fg0 flex_y">
					<view class="ml28 flex_y" @click="showTrnas" data-type="filter">
						<image class="img32_32 mr6" src="/static/images/icon/screen.png" mode="aspectFill" />
						筛选
					</view>
					<view class="ml28 flex_y" @click="showTrnas" data-type="sort">
						<image class="img36_36 mr6" src="/static/images/icon/sort.png" mode="aspectFill" />
						排序
					</view>
				</view>
			</view>
		</view>
		<view class="" :style="{height:transTop +'px'}"></view>
	</view>
</template>

<script>
	import TopPopup from './TopPopup.vue'
	export default {
		components: {
			TopPopup,
		},
		props: {
			hintText: String,
			hintShow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				transTop: 0, //内容高度
				classify: 'sort', //弹框类型

			}
		},
		mounted() {
			this.$nextTick(() => {
				uni.$z.getRectInfo('.head', undefined, this).then(size => {
					this.transTop = size.height
				})
			})
		},
		methods: {
			showTrnas(e) {
				this.classify = e.currentTarget.dataset.type
				this.$refs.topPopup.showTrnas()
			},
		}
	}
</script>

<style lang="scss">
	.img32_32 {
		width: 32rpx;
		height: 32rpx;
	}

	.img36_36 {
		width: 36rpx;
		height: 36rpx;
	}

	.head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
		background: #fff;

		&__hint {
			height: 72rpx;
			line-height: 72rpx;
			color: #ff7803;
			background: rgba(255, 120, 3, .1);
		}

		.mintba {
			height: 80rpx;
			border-bottom: 2rpx solid #E2E0DF;
		}
	}
</style>